<template>
  <view class="track">
    <!-- 索引 -->
    <view class="track_index">
      {{ index + 1 }}
    </view>
    <!-- 歌曲 -->
    <view class="play" @click="player(track)">
      <view class="play_title">{{ track.name }}</view>
      <view class="play_context">{{ track.ar[0].name }} - {{ track.al.name }}</view>
    </view>
    <!-- 操作 -->
    <view class="play_active">
      <text class="iconfont icon-shipin"></text>
      <text class="iconfont icon-gengduo1"></text>
    </view>
  </view>

</template>

<script setup>
  defineProps(['track', 'index'])
  import {
    useMusicStore
  } from '@/store/modules/musicStore.js'
  const musicStore = useMusicStore()
  // 点击开始播放音乐
  const player = async (tranck) => {
    musicStore.isPlay = false
    await musicStore.getMusicPlayer(tranck.id)
	console.log(tranck);
    musicStore.musicInfo = tranck
    musicStore.isPlay = true
  }
</script>

<style lang="scss" scoped>
  .track {
    display: flex;
    // flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;

    .track_index {
      flex-basis: 100rpx;
      flex-shrink: 0;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 36rpx;
      color: #aaaa7f;
    }

    .play {
      height: 100rpx;
      width: 500rpx;
      flex: 1;
      display: flex;
      flex-direction: column;

      view {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .play_title {
        font-size: 30rpx;
      }

      .play_context {
        font-size: 20rpx;
        color: #aaaa7f;
      }
    }

    .play_active {
      flex-basis: 150rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: space-around;

      text {
        font-size: 38rpx;
        color: #aaaa7f;
      }
    }
  }
</style>